<!--
  历史数据监测
 -->

<template>
  <BaseMainSlot>
    <template v-slot:zhactbar> </template>
    <template v-slot:farmtypeselectslot>
      <energy @topitemtype="topitemtype" />
    </template>
    <template v-slot:content>
      <!-- 页面 -->
      <div class="Dmain">
        <!-- 设备电表选择 -->
        <div class="Meter-selection">
          <p>{{ showName }}</p>
          <!-- 饲料搅拌机列表 -->
          <div class="list" @scroll="scrollEvent">
            <div
              v-for="(item, index) in list"
              :key="index"
              :class="
                energyEquipmentCoding === item.energyEquipmentCoding
                  ? 'list-contents'
                  : 'list-content'
              "
              @click="
                active(item.energyEquipmentCoding, item.energyEquipmentName)
              "
            >
              {{ item.energyEquipmentName }}
            </div>
          </div>
        </div>
        <!-- 右边折线图 -->
        <div class="line">
          <div class="search-time-box">
            <div class="week">
              <div
                v-for="item in week"
                :key="item.id"
                :class="
                  changeWeekClass == item.id ? 'content' : 'contentActive'
                "
                @click="change(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="date">
              <div class="block">
                <span class="demonstration">开始时间:</span>
                <el-date-picker
                  v-model="startDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                />
              </div>
              <div class="block2">
                <span class="demonstration">结束时间:</span>
                <el-date-picker
                  v-model="endDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                />
              </div>
              <div class="block2">
                <span class="demonstration">精度:</span>
                <el-select
                  v-model="accuracy"
                  class="input-select"
                  filterable
                  clearable
                  placeholder="请选择精度"
                >
                  <el-option
                    v-for="(item, index) in accuracyList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
              <div class="search ml-20">
                <img
                  src="~@/assets/action-bar-icon/search.png"
                  @click="queryList"
                />
              </div>
            </div>
          </div>

          <!-- 能耗用量 能耗积累量 -->
          <div class="energyAdd">
            <div
              v-for="item in energyAdd"
              :key="item.id"
              :class="energyAddClass == item.id ? 'btnActive' : 'btn'"
              @click="changeenergyAdd(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 能耗积累量折线图 -->
          <div class="bot-line">
            <div class="content">
              <p>{{ name }}</p>
              <div class="content-line">
                <Echartsone
                  :cdata="lineObject"
                  nowwidth="100%"
                  nowheight="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import energy from "../components/historyButton/index.vue";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import Clickoutside from "element-ui/src/utils/clickoutside";
import req from "@/api/digital-operation/detection-manage-ment/detection-type-manage";
import Echartsone from "@/components/Echarts/components/barechart/chart.vue";
import moment from "moment";
export default {
  components: { BaseMainSlot, energy, Echartsone },
  directives: { Clickoutside },
  mixins: [mymixin],
  data() {
    return {
      topitemtypeid: "",
      startDate: "",
      endDate: "",
      week: [
        {
          name: "日",
          id: 1
        },
        {
          name: "周",
          id: 7
        },
        {
          name: "月",
          id: 30
        }
      ],
      energyAdd: [
        {
          name: "能耗用量",
          id: 1
        },
        {
          name: "能耗累积量",
          id: 2
        }
      ],
      accuracyList: [
        {
          name: "日",
          id: 1
        },
        {
          name: "时",
          id: 0
        }
      ],
      // 饲料搅拌机列表
      list: [],
      showName: "设备电表选择",
      // 点谁谁变色
      energyEquipmentCoding: "",
      // 点谁谁变色 (日，周,月)
      changeWeekClass: 1,
      // 点谁谁变色 (能耗用量，能耗累积量)
      energyAddClass: 1,
      // 折线图x轴数据
      lineObject: { xAxisdata: [], seriesData: [] },
      // 精度
      accuracy: 1,
      // 电表名称
      name: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 历史数据监测-能耗累计量（电）
    queryElectricEnergyHistory() {
      var params = {
        energyEquipmentCoding: this.energyEquipmentCoding
      };
      if (this.accuracy) {
        params["accuracy"] = this.accuracy;
      }
      if (this.changeWeekClass) {
        params["fatalism"] = this.changeWeekClass;
      }
      if (this.startDate) {
        params["startDate"] = moment(this.startDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.endDate) {
        params["endDate"] = moment(this.endDate).format("YYYY-MM-DD HH:mm:ss");
      }
      req.queryElectricEnergyHistory(params).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          if (data) {
            this.lineChart(data);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 历史数据监测-能耗累计量（水）
    queryWaterEnergyHistory() {
      var params = {
        energyEquipmentCoding: this.energyEquipmentCoding
      };
      if (this.accuracy) {
        params["accuracy"] = this.accuracy;
      }
      if (this.changeWeekClass) {
        params["fatalism"] = this.changeWeekClass;
      }
      if (this.startDate) {
        params["startDate"] = moment(this.startDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.endDate) {
        params["endDate"] = moment(this.endDate).format("YYYY-MM-DD HH:mm:ss");
      }
      req.queryWaterEnergyHistory(params).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          if (data) {
            this.lineChart(data);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 历史数据监测-能耗用量（电）
    queryElectricDosage() {
      var params = {
        energyEquipmentCoding: this.energyEquipmentCoding
      };
      if (this.accuracy) {
        params["accuracy"] = this.accuracy;
      }
      if (this.changeWeekClass) {
        params["fatalism"] = this.changeWeekClass;
      }
      if (this.startDate) {
        params["startDate"] = moment(this.startDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.endDate) {
        params["endDate"] = moment(this.endDate).format("YYYY-MM-DD HH:mm:ss");
      }
      req.queryElectricHistoryDosage(params).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          if (data) {
            this.lineChart(data);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 历史数据监测-能耗用量（水）
    queryWaterDosage() {
      var params = {
        energyEquipmentCoding: this.energyEquipmentCoding
      };
      if (this.accuracy) {
        params["accuracy"] = this.accuracy;
      }
      if (this.changeWeekClass) {
        params["fatalism"] = this.changeWeekClass;
      }
      if (this.startDate) {
        params["startDate"] = moment(this.startDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.endDate) {
        params["endDate"] = moment(this.endDate).format("YYYY-MM-DD HH:mm:ss");
      }
      req.queryWaterHistoryDosage(params).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          if (data) {
            this.lineChart(data);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 历史数据监测-能耗用量（水）
    lineChart(data) {
      let xAxisdata = [];
      let seriesData = [];
      for (var key in data) {
        xAxisdata.push(key);
        seriesData.push(data[key]);
      }
      let energyType = "";
      if (this.energyAddClass === 1) {
        energyType = "能耗用量";
      }
      if (this.energyAddClass === 2) {
        energyType = "能耗累积量";
      }
      this.lineObject = {
        xAxisdata: xAxisdata,
        font: 0,
        seriesData: [
          {
            data: seriesData,
            type: "line",
            smooth: true,
            name: energyType,
            symbol: "circle",
            symbolSize: "8",
            itemStyle: {
              normal: {
                color: "#1bdaf8", // 折线点的颜色
                lineStyle: {
                  color: "#2CD1E4" // 折线的颜色
                }
              }
            }
          }
        ]
      };
    },
    // 获取点击的分页index
    topitemtype(e, energyCoding) {
      this.topitemtypeid = e;
      // 获取表格数据
      // console.log(energyCoding)
      if (energyCoding === "electricity") {
        this.showName = "设备电表选择";
        this.energyAdd = [
          {
            name: "用电量",
            id: 1
          },
          {
            name: "用电累积量",
            id: 2
          }
        ];
      } else if (energyCoding === "running_water") {
        this.showName = "设备水表选择";
        this.energyAdd = [
          {
            name: "用水用量",
            id: 1
          },
          {
            name: "用水累积量",
            id: 2
          }
        ];
      }
      let params = {
        entity: {
          energyTypeId: e
        },
        page: 1,
        size: 1000
      };
      // 根据e获取电表或者水表列表
      req.getEnergyWatch(params).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          this.list = data.content || [];
          if (this.list.length > 0) {
            this.active(this.list[0]["energyEquipmentCoding"]);
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 点谁谁变色
    active(index, name) {
      // console.log(name);
      this.name = name;
      this.energyEquipmentCoding = index;
      this.queryList();
    },
    queryList() {
      this.lineObject = { xAxisdata: [], seriesData: [] };
      // 能耗用量
      if (this.energyAddClass === 1) {
        if (this.showName === "设备电表选择") {
          this.queryElectricDosage();
        } else if (this.showName === "设备水表选择") {
          this.queryWaterDosage();
        }
      } else if (this.energyAddClass === 2) {
        // 能耗累计量
        if (this.showName === "设备电表选择") {
          this.queryElectricEnergyHistory();
        } else if (this.showName === "设备水表选择") {
          this.queryWaterEnergyHistory();
        }
      }
    },
    change(id) {
      this.changeWeekClass = id;
      this.endDate = "";
      this.startDate = "";
      this.queryList();
    },
    changeenergyAdd(id) {
      this.energyAddClass = id;
      this.queryList();
    },
    scrollEvent(e) {
      if (
        e.srcElement.scrollHeight -
          e.srcElement.scrollTop -
          e.srcElement.clientHeight <
        0.3
      ) {
        // console.log("嘿嘿我在底部触发了");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
@import "~@/styles/variables.scss";
::v-deep .common-layout {
  border: 1px dashed rgba(14, 196, 151, 1) !important;
  .zhcontent {
    height: calc(100% - 15px) !important;
  }
}
::v-deep .w50p {
  width: 50% !important;
}
// 页面布局
.Dmain {
  width: 100%;
  height: 100%;
  // background-color: red;
  display: flex;
  justify-content: space-between;
  .Meter-selection {
    width: 10%;
    height: 100%;
    p {
      width: 90%;
      height: 50px;
      margin: 0 auto;
      font-size: 16px;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px dashed rgb(0, 144, 179);
    }
    .list {
      width: 90%;
      height: 90%;
      margin: 0 auto;
      margin-top: 20px;
      overflow-y: auto;
      .list-content {
        cursor: pointer;
        width: 100%;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #fff;
      }
      .list-contents {
        cursor: pointer;
        width: 100%;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #fff;
        background-color: rgb(0, 144, 179);
      }
    }
  }
  .line {
    width: 89%;
    height: 100%;
    // background-color: grey;
    .date {
      height: 50px;
      // background-color: red;
      display: flex;
      .block {
        display: flex;
        align-items: center;
      }
      .search {
        display: flex;
        align-items: center;
      }
      .block2 {
        margin-left: 30px;
        display: flex;
        align-items: center;
      }
      button {
        margin-left: 30px;
        height: 38px;
      }
    }
    .search-time-box {
      width: 100%;
      display: flex;
      align-items: center;
    }
    .week {
      height: 50px;
      // background-color: red;
      display: flex;
      .content {
        border: 1px solid rgb(16, 134, 174);
        cursor: pointer;
        margin-right: 10px;
        color: white;
        width: 60px;
        height: 50px;
        font-size: 21px;
        text-align: center;
        line-height: 45px;
        border-radius: 20px;
        background-color: rgb(0, 144, 179);
      }
      .contentActive {
        border: 1px solid rgb(16, 134, 174);
        cursor: pointer;
        margin-right: 10px;
        color: white;
        width: 60px;
        height: 50px;
        font-size: 21px;
        text-align: center;
        line-height: 45px;
        border-radius: 20px;
        // background-color: #fff;
      }
    }
    .energyAdd {
      display: flex;
      margin-top: 10px;
      width: 100%;
      height: 35px;
      // background-color: red;
      .btnActive {
        cursor: pointer;
        border: 1px solid #fff;
        margin-right: 10px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        width: 120px;
        height: 30px;
        background-color: rgb(16, 105, 134);
      }
      .btn {
        cursor: pointer;
        margin-right: 10px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        width: 120px;
        height: 30px;
        background-color: rgb(16, 105, 134);
      }
    }
    .bot-line {
      width: 100%;
      height: 70%;
      // background-color: green;
      .content {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
        height: calc(100% - 20px);
        border: 1px solid rgb(44, 209, 298);
        border-radius: 10px;
        // background-color: red;
        p {
          // border: 1px solid rgb(12, 249, 247);
          text-align: center;
          line-height: 30px;
          position: absolute;
          top: -15px;
          right: 50%;
          margin: 0;
          transform: translate(50%, 0);
          // width: 120px;
          height: 30px;
          background-image: url("~@/assets/kuang.png");
          background-size: cover;
          background-size: 100% 120%;
          background-repeat: no-repeat;
          width: 170px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // clip-path: polygon(
          //   15px 0px,
          //   0px 15px,
          //   15px 30px,
          //   85px 30px,
          //   100px 15px,
          //   85px 0px
          // );
          color: rgb(0, 255, 244);
          background-color: rgb(3, 59, 79);
        }
      }
      .content-line {
        width: 100%;
        height: 100%;
      }
      .data {
        width: 20%;
        height: 100%;
        // background-color: royalblue;
        h5 {
          font-size: 16px;
          color: rgb(44, 209, 298);
          margin-top: 100px;
          text-align: center;
        }
        h1 {
          font-weight: normal;
          text-align: center;
          span {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
